/*
 * @Author: HZK
 * @Date: 2020-11-30 15:39:55
 * @LastEditTime: 2020-12-08 21:17:09
 * @LastEditors: hanfengmi
 * @Description: home页入口
 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Gauge, Pie, Radar } from '@ant-design/charts';
import { PageHeader, Timeline } from 'antd';
import styles from './index.less';

const ticks = [0, 1 / 3, 2 / 3, 1];
const color = ['#F4664A', '#FAAD14', '#30BF78'];
var data = [
  {
    type: '一重天',
    value: 227,
  },
  {
    type: '二重天',
    value: 256,
  },
  {
    type: '三重天',
    value: 189,
  },
  {
    type: '四重天',
    value: 155,
  },
  {
    type: '五重天',
    value: 110,
  },
  {
    type: '六重天',
    value: 85,
  },
  {
    type: '七重天',
    value: 64,
  },
  {
    type: '八重天',
    value: 25,
  },
  {
    type: '九重天',
    value: 15,
  },
];
var config2 = {
  appendPadding: 10,
  data: data,
  angleField: 'value',
  colorField: 'type',
  radius: 1,
  innerRadius: 0.6,
  label: {
    type: 'inner',
    offset: '-50%',
    content: '{value}',
    style: {
      textAlign: 'center',
      fontSize: 14,
    },
  },
  interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
  statistic: {
    title: false,
    content: {
      style: {
        whiteSpace: 'pre-wrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        fontSize:20
      },
      formatter: function formatter() {
        return '神仙分布';
      },
    },
  },
};

const data3 = [
  { name: '天仙', star: 278 },
  { name: '地仙', star: 217 },
  { name: '尸解仙', star: 98 },
  { name: '鬼仙', star: 159 },
];


class ReactDemo extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      percent:0.7
    }
  }
  componentDidMount(){
    this.timer = setInterval(()=>{
      const a = 1 - Math.random().toFixed(2)/2
      this.setState({
        percent: a
      })
    },3000)
  }
  componentWillUnmount(){
    clearInterval(this.timer)
  }
  render () {
    const { num = 1, global:{list} } = this.props
    const config = {
      percent: this.state.percent,
      range: {
        ticks: [0, 1],
        color: ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
      },
      indicator: {
        pointer: { style: { stroke: '#D0D0D0' } },
        pin: { style: { stroke: '#D0D0D0' } },
      },
      statistic: {
        title: {
          formatter: function formatter(_ref) {
            var percent = _ref.percent;
            if (percent < ticks[1]) {
              return '松散';
            }
            if (percent < ticks[2]) {
              return '一般';
            }
            return '严密';
          },
          style: function style(_ref2) {
            var percent = _ref2.percent;
            return {
              fontSize: '20px',
              lineHeight: 1,
              color: percent < ticks[1] ? color[0] : percent < ticks[2] ? color[1] : color[2],
            };
          },
        },
        content: {
          offsetY: 36,
          style: {
            fontSize: '22px',
            color: '#4B535E',
          },
          formatter: function formatter() {
            return '天庭戒备';
          },
        },
      }
    }
    const config3 = {
      data: data3.map((d) => ({ ...d, star: d.star })),
      xField: 'name',
      yField: 'star',
      meta: {
        star: {
          alias: '神仙数量',
          min: 0,
          nice: true,
        },
      },
      xAxis: {
        line: null,
        tickLine: null,
      },
      yAxis: {
        label: false,
        grid: {
          alternateColor: 'rgba(0, 0, 0, 0.04)',
        },
      },
      // 开启辅助点
      point: {},
      area: {},
    };
    return (
      <div className={styles.wrapper}>
        <PageHeader
          backIcon={false}
          onBack={() => null}
          title="天庭数据汇总"
          subTitle={`玉帝最帅`}
        />
        <div>
          <div className={styles.NumShow}>
            <p>神仙总数 <span>842</span></p>
            <p>今日飞升 <span>6</span></p>
            <p>今日被贬 <span>2</span></p>
            <p>管理员 <span>12</span></p>
          </div>
        </div>
        <div style={{display:'flex',justifyContent:'space-around'}}>
          <Gauge style={{width:'20%'}} {...config} />
          <Pie style={{width:'25%'}} {...config2} />
          <Radar style={{width:'25%'}} {...config3} />
        </div>
      </div>
    )
  }
}
ReactDemo.propTypes = {
  num:PropTypes.number,
}
export default connect(({ global }) => ({
  global
}))(ReactDemo);
